<!--
 * @Author: lsjweiyi 759209794@qq.com
 * @Date: 2024-02-01 22:23:50
 * @LastEditors: lsjweiyi 759209794@qq.com
 * @LastEditTime: 2024-02-02 22:51:27
 * @FilePath: \random-drawing-machine\frontend\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
    import { ref } from "vue";
    import { GetCompanies } from "../../wailsjs/go/main/App";
    import { NAlert, NGrid, NGridItem, NButton, NEllipsis } from "naive-ui";
    const hasCompanies = ref(true);
    const companies = ref({});
    const column = ref(4);
    GetCompanies().then((result) => {
        if (result.Errormsg == "") {
            let tmpCompanies = [];
            for (let index = 0; index < result.Companies.length; index++) {
                if (result.Companies[index] != "") {
                    tmpCompanies.push({ comp: result.Companies[index], bg: "unset" });
                }
            }
            companies.value = { Companies: tmpCompanies };
            if (tmpCompanies.length == 0) {
                companies.value = {Errormsg:"文件中请至少包含一条选项！"};
                hasCompanies.value = false;
            }
            calculateColumn();
        } else {
            companies.value = result;
            hasCompanies.value = false;
        }
    });

    function calculateColumn() {
        let len = companies.value.Companies.length;
        column.value = Math.ceil(Math.sqrt(len));
        console.log(column.value);
    }

    function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }

    let endFlag = false;
    const runFlag = ref(false);
    let next = 0;
    function start() {
        if (runFlag.value) {
            return;
        }
        endFlag = false;
        new Promise(async (res) => {
            showResult.value = "";
            runFlag.value = true;
            while (!endFlag) { 
                if (next == 0) {
                    companies.value.Companies[companies.value.Companies.length - 1].bg = "unset";
                } else {
                    companies.value.Companies[next - 1].bg = "unset";
                }
                await sleep(20);
                companies.value.Companies[next].bg = "blueviolet";
                next++;
                if (next >= companies.value.Companies.length) {
                    next = 0;
                }
                await sleep(30);
            }
            runFlag.value = false;
        });
    }
    const showResult = ref("");
    function stop() {
        endFlag = true;
        let choosed = next == 0 ? companies.value.Companies.length - 1 : next - 1;
        showResult.value = "抽签结果：恭喜 " + companies.value.Companies[choosed].comp;
    }

    function handleKeyDown(event) {
        if (event.code === "Space") {
            if (!runFlag.value) {
                return;
            }
            // 当按下 Enter 键时触发该函数
            stop();
        } else if (event.code === "Enter") {
            if (runFlag.value) {
                return;
            }
            // 当按下空格键时触发该函数
            start();
        }
    }
    window.addEventListener("keydown", handleKeyDown);
</script>

<template>
    <div style="font-size: 48px">仁化县人民医院随机抽签器</div>
    <div style="font-size: 30px; color: red; height: 36px">{{ showResult }}</div>
    <div style="min-height: 600px; min-width: 600px" class="center">
        <n-alert v-if="!hasCompanies" title="读取文件出错" type="error">
            {{ companies.Errormsg }}
        </n-alert>
        <n-grid :x-gap="8" :y-gap="8" :cols="column" class="center" style="justify-items: center; width: unset; align-content: center">
            <n-grid-item class="item" v-if="hasCompanies" v-for="v in companies.Companies" :style="{ 'background-color': v.bg }">
                <n-ellipsis :line-clamp="4">
                    {{ v.comp }}
                </n-ellipsis>
            </n-grid-item>
        </n-grid>
        <div v-if="hasCompanies" style="display: inline-flex; padding-top: 15px">
            <n-button type="primary" size="large" style="margin-right: 30px" :on-click="start" :disabled="runFlag">开始滚动(回车键)</n-button>
            <n-button type="error" size="large" :on-click="stop" :disabled="!runFlag">停止(空格键)</n-button>
        </div>
    </div>
</template>

<style>
    .item {
        border: 1px solid #ccc;
        height: 120px;
        width: 120px;
        flex: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        font-size: 16px;
    }
</style>
